<template>
  <div class="release_apply">
    <!--    <h1>发布申请</h1>-->
    <div class="release_apply_category" style="display: flex;justify-content: space-between;">
      <!-- 展示所有的分类tag,及对应的申请单数量 -->
      <a-radio-group :value="apply_category" @change="handleCategoryChange">
        <a-radio-button value="0">
          全部({{release_apply_data.length}})
        </a-radio-button>
        <a-radio-button :value="status_value[0]" v-for="(status_value,status_index) in release_apply_status_data" :key="status_index">
          {{status_value[1]}} ({{classify_release_apply_data[status_value[0]].length}})
        </a-radio-button>
      </a-radio-group>
      <!--新建发布申请按钮 -->
      <a-button type="primary" icon="plus" @click="new_release_apply">
        新建发布申请
      </a-button>
    </div>

    <!--选择应用的对话框-->
    <div class="choose_app">
      <!--选择应用-->
      <a-modal v-model="choose_app_visible" title="选择应用" width="800px">
        <a-row>
          <!--切换环境-->
          <a-col :span="6">
            <div>
              <!--@select切换不同的环境-->
              <a-menu :default-selected-keys="['1']" mode="inline" :inline-collapsed="collapsed" @select="envs_menu_change">
                <a-menu-item :key="envs_value.id" v-for="(envs_value,envs_index) in envs_data">
                  <a-icon type="pie-chart"/>
                  <span>{{envs_value.name}}</span>
                </a-menu-item>
              </a-menu>
            </div>
          </a-col>
          <!--选择新建发布的应用-->
          <a-col :span="18">
            <a-row type="flex" justify="space-around" align="middle">
              <a-col :span="8" :key="app_index" v-for="(app_value,app_index) in app_data">
                <p style="height: 80px;line-height: 80px;text-align: center">
                  <!--选择应用的点击事件 show_new_release_apply 关闭选择应用的对话框,打开新建发布的对话框-->
                  <a-button @click="show_new_release_apply(app_value.id)" type="primary" style="height: 50px;width: 150px;">
                    {{app_data.name}}
                  </a-button>
                </p>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-modal>
    </div>

    <!--选择应用后, 新建发布申请的对话框-->
    <div class="new_release_apply_modal">
      <a-modal v-model="new_release_visible" title="新建发布申请" width="800px" >
        <!--申请的form表单-->
        <div class="new_release_model_from">
          <a-form-model
            ref="ruleForm" :model="new_release_form_data.form" :rules="new_release_form_data.rules"
            :label-col="new_release_form_data.labelCol" :wrapper-col="new_release_form_data.wrapperCol">
            <a-form-model-item ref="apply_title" label="申请标题" prop="apply_title">
              <a-input v-model="new_release_form_data.form.apply_title" @blur="() => {$refs.apply_title.onFieldBlur();}"/>
            </a-form-model-item>
            <a-form-model-item label="选择分支/标签版本" prop="version">
              <a-input-group compact>
                <a-select style="width: 30%" v-model="new_release_form_data.form.git_release_branch_or_tag" default-value="1">
                  <a-select-option value="1">branch</a-select-option>
                  <a-select-option value="2">Tag</a-select-option>
                </a-select>
                <a-select style="width: 70%" v-model="new_release_form_data.form.git_release_version" default-value="1">
                  <a-select-option :value="branch_value" v-for="(branch_value, branch_index) in git_branchs" :key="branch_index">
                    {{branch_value}}
                  </a-select-option>
                </a-select>
              </a-input-group>
            </a-form-model-item>
            <a-form-model-item label="选择Commit ID" required prop="git_release_commit_id" v-if="new_release_form_data.form.git_release_branch_or_tag==='1'">
              <a-select v-model="new_release_form_data.form.git_release_commit_id" default-value="1">
                <a-select-option :value="commit_info_index" v-for="(commit_info_value, commit_info_index) in git_branchs_commit_info" :key="commit_info_index">
                  {{commit_info_value}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="备注信息" prop="release_desc">
              <a-input v-model="new_release_form_data.form.release_desc" type="textarea"/>
            </a-form-model-item>
          </a-form-model>
        </div>
        <!--提交按钮-->
        <template slot="footer">
          <a-button key="back" @click="resetCreateApplyForm">取消</a-button>
          <a-button key="submit" type="primary" @click="onCreateApplySubmit">提交</a-button>
        </template>
      </a-modal>
    </div>

    <!--展示所有的应用发布申请单-->
    <div class="release_apply_list" style="margin-top: 20px;">
      <a-table :columns="columns" :data-source="different_status_release_apply" rowKey="id">
        <a slot="action" slot-scope="text, record" v-if="record.release_status==='1'">
          <a-button size="small" @click="review_info(record.id)" type="link">审核</a-button> |
          <a-button size="small"  type="link">编辑</a-button> |
          <a-button size="small"  type="link">删除</a-button>
        </a>
        <a slot="action" slot-scope="text, record" v-else-if="record.release_status==='2'">
          <a-button size="small"  type="link">
            <router-link :to="'/hippo/release_result/'+record.id + '/'">发布</router-link>
          </a-button> |
          <a-button size="small"  type="link">查看</a-button>
        </a>
        <a slot="action" slot-scope="text, record" v-else-if="record.release_status==='3'">
          <a-button size="small" type="link">查看</a-button> |
          <a-button size="small"  type="link">回滚</a-button>
        </a>
        <a slot="action" slot-scope="text, record" v-else-if="record.release_status==='4'">
          <a-button size="small" type="link" style="color:Red;">快查看吧</a-button>
        </a>
        <a slot="action" slot-scope="text, record" v-else>
          <a-button size="small"  type="link">查看</a-button>
        </a>
      </a-table>
    </div>

    <!--审核对话框-->
    <div class="review_modal">
      <a-modal v-model="review_visible" title="审核发布申请" @ok="handleReviewOk">
        <a-form-model :model="review_data.form" :label-col="review_data.labelCol" :wrapper-col="review_data.wrapperCol">
          <a-form-model-item label="审核结果">
            <a-switch v-model="review_data.review_status"/>
          </a-form-model-item>
          <a-form-model-item label="审核意见">
            <a-input v-model="review_data.form.review_desc" type="textarea"/>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>

  </div>
</template>

<script>
  const columns = [
    {title: '申请标题', width: 50, dataIndex: 'apply_title', key: 'apply_title',},
    {title: '应用', width: 50, dataIndex: 'app_name', key: 'app_name',},
    {title: '发布环境', dataIndex: 'envs_name', key: 'envs_name', width: 80},
    {title: '版本', dataIndex: 'git_release_commit_id', key: 'git_release_commit_id', width: 50},
    {title: '状态', dataIndex: 'get_release_status_display', key: 'get_release_status_display', width: 50},
    {title: '申请人', dataIndex: 'username', key: 'username', width: 50},
    {title: '申请时间', dataIndex: 'created_time', key: 'created_time', width: 100},
    {title: '操作', key: 'operation', width: 100, scopedSlots: {customRender: 'action'},},
  ];
  export default {
    name: "ReleaseApply",
    data() {
      return {
        envs_data:[],  // 环境数据
        envs_id:1, // 所选环境的id值
        app_data:[],  // 应用数据
        release_apply_data:[],  // 发布申请数据
        classify_release_apply_data:{},  // 所有分类归纳的发布申请数据
        different_status_release_apply:[], // 点击不能分类时的 发布申请数据
        app_id:1, // 用户新建发布申请时选择的应用id
        release_apply_status_data:[],  // 发布申请状态数据  待审核,待发布发布成功..

        // 根据分类划分出5个数据
        release_apply_data_1 : [], // 待审核数据
        release_apply_data_2 : [], // 待发布数据
        release_apply_data_3 : [], // 发布成功数据
        release_apply_data_4 : [], // 发布异常数据
        release_apply_data_5 : [], // 其他类型数据

        // 表格展示列名
        columns,

        apply_category: '0',  // 发布申请分类，默认为全部
        choose_app_visible: false,  // 选择应用的对话框
        new_release_visible: false,  // 选择应用后,新建发布的对话框

        review_visible: false, // 审核弹框显示或者隐藏
        review_data:{
          labelCol: { span: 4 },
          wrapperCol: { span: 14 },
          release_id:0, // 点击审核的申请记录id
          review_status:false, // 审核状态，
          form: {
            release_status: '1', // 审核状态为true时，它的值为2，表示待发布
            review_user:1,  // 审核用户的id
            review_desc: '',// 审核意见
          },
        },

        collapsed: false, // 环境分类菜单栏数据属性

        new_release_form_data: {
          labelCol: {span: 4},
          wrapperCol: {span: 14},
          other: '',
          // 新建发布申请表单中,存储的数据
          form: {
            apply_title: '', // 申请标题
            release_status: '1',  // 待审核
            git_release_branch_or_tag:'1',  // 申请选择的是git分支还是标签
            git_release_version:'master', // 分支/标签 的版本
            git_release_commit_id: '', // git的commit id 数据
            release_record:0,
            release_desc: '',  // 备注信息
          },
          rules: {
            apply_title: [
              {required: true, message: '请输入申请标题', trigger: 'blur'},
              {min: 1, max: 10, message: 'Length should be 1 to 10', trigger: 'blur'},
            ],
            git_release_branch_or_tag: [{required: true, message: '请选择分支还是标签', trigger: 'change'}],
            git_release_version: [{required: true, message: '请选择版本', trigger: 'change'}],
            git_release_commit_id: [{required: true, message: '请选择commit ID', trigger: 'change'}],
          },
        }
      }
    },
    created() {
      this.get_envs_data();
      // this.get_app_data();
      this.change_env_event(); // 获取不同环境的应用，默认是测试环境，页面加载时触发一次，环境菜单切换时也触发
      this.get_release_apply_data();
      this.get_release_apply_status_data();
    },
    watch:{
      'new_release_form_data.form.git_release_version':function (val) {
        this.show_new_release_apply();  // 执行获取不同分支的版本数据
      },
      'review_data.review_status': function (val) {
        this.review_data.form.release_status = this.review_data.review_status ? '2':'1'
        console.log('>>>>>>>>>release_status',this.review_data.form.release_status)
      }
    },
    methods: {
      // 获取所有发布申请数据
      get_release_apply_data(){
        this.$axios.get(`${this.$settings.HOST}/release/release_apply/`).then((res)=>{
          this.release_apply_data = res.data;
          // 针对应用的不同的status状态, 来进行分类
          this.classify_release_data_by_status();
          this.different_status_release_apply = this.release_apply_data;
        }).catch((error)=>{

        })
      },
      // 获取所有发布申请的状态分类数据
      get_release_apply_status_data(){
        this.$axios.get(`${this.$settings.HOST}/release/release_apply/status/`).then((res)=>{
          this.release_apply_status_data = res.data.status_data;
        }).catch((error)=>{

        })
      },
      // 获取所有环境数据
      get_envs_data(){
        this.$axios.get(`${this.$settings.HOST}/conf_center/environments/`)
        .then((res)=>{
          this.envs_data = res.data;
        }).catch((error)=>{

        })
      },
      // 获取所有应用数据
      get_app_data(){
        this.$axios.get(`${this.$settings.HOST}/release/list/`)
        .then((res)=>{
          this.app_data = res.data;
        }).catch((error)=>{

        })
      },
      // 切换环境时，展示对应的环境的应用
      change_env_event(){
        this.$axios.get(`${this.$settings.HOST}/release/envs/apps/`,{
          params:{
            envs_id:this.envs_id,
          }
        }).then((res)=>{
          this.app_data = res.data.envs_apps_data;
        }).catch((error)=>{
        })
      },

      // 根据发布申请的状态，将发布申请数据进行分类,请求数据回来之后，就执行该方法
       classify_release_data_by_status(){
        // 先对应用进行分类
        this.release_apply_data.forEach((k,v)=>{
         if (k.release_status === '1'){
           this.release_apply_data_1.push(k);
         }
         else if (k.release_status === '2'){
           this.release_apply_data_2.push(k);
         }
         else if (k.release_status === '3'){
           this.release_apply_data_3.push(k);
         }
         else if (k.release_status === '4'){
           this.release_apply_data_4.push(k);
         }
         else {
           this.release_apply_data_5.push(k);
         }
       });
        // 然后把所有分类,赋值给classify_release_apply_data保存
        this.classify_release_apply_data['0'] = this.release_apply_data
        this.classify_release_apply_data['1'] = this.release_apply_data_1
        this.classify_release_apply_data['2'] = this.release_apply_data_2
        this.classify_release_apply_data['3'] = this.release_apply_data_3
        this.classify_release_apply_data['4'] = this.release_apply_data_4
        this.classify_release_apply_data['5'] = this.release_apply_data_5
       },

      // 点击新建发布的弹框中的确认按钮的效果
      onCreateApplySubmit() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            console.log('>>>>>>>>>>',this.new_release_form_data.form);
            this.$axios.post(`${this.$settings.HOST}/release/release_apply/`,this.new_release_form_data.form).then((res)=>{
                this.release_apply_data.push(res.data);
                this.classify_release_data_by_status();
                this.different_status_release_apply = this.release_apply_data;
                this.resetCreateApplyForm();
              }).catch((error)=>{

            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 点击新建发布的弹框中的取消按钮的效果
      resetCreateApplyForm() {
        this.$refs.ruleForm.resetFields();
        this.new_release_visible = false;
      },

      // 点击新建发布按钮的弹框效果
      new_release_apply() {
        this.choose_app_visible = true;
      },
      // 点击应用，弹出新建发布申请的弹框
      show_new_release_apply(app_id=null) {
         console.log('app_id>> ',app_id);
         // 发送请求，获取分支数据以及不同分支的commits版本数据
        if (app_id){
          this.app_id = app_id;
        }

        this.$axios.get(`${this.$settings.HOST}/release/git/branchs/`,{
          params:{
            app_id: this.app_id,
            branchs:this.new_release_form_data.form.git_release_version,
          }
        }).then((res)=>{
          // res.data.branch_list -- ["dev" ,"master"]
          this.git_branchs = res.data.branch_list;
          this.git_branchs_commit_info = res.data.commits;
          this.new_release_form_data.form.release_record = res.data.release_record_id;
        }).catch((error)=>{

        })
        this.choose_app_visible = false;
        this.new_release_visible = true;
      },
      // 新建发布弹框中，选择不同环境的切换效果,antd官网中就有这个select事件如何使用
      envs_menu_change({item, key, selectedKeys}) {
        this.envs_id = key;
        this.change_env_event();
      },
      // 发布类型按钮点击切换效果
      handleCategoryChange(e) {
        this.apply_category = e.target.value;
        this.different_status_release_apply = this.classify_release_apply_data[this.apply_category]
        console.log(this.apply_category, typeof this.apply_category);
      },

      // 点击审核,记录id值并弹出审核对话框
      review_info(release_id) {
        console.log('release_id>>>', release_id);
        this.review_data.release_id = release_id;
        this.review_visible = true;
      },
      // 审核对话框的点击提交
      handleReviewOk() {
        console.log('review_data: ',this.review_data.form);
        this.$axios.put(`${this.$settings.HOST}/release/release_ap/${this.review_data.release_id}/`, this.review_data.form).then((res)=>{
          // console.log('?????', res.data);
          console.log('this.different_status_release_apply',this.different_status_release_apply);
          location.reload();
        }).catch((error)=>{

        })
      },

    },
  }
</script>

<style scoped>

</style>
